<template>
  <div>
    <el-tooltip content="点击查看账号数据分析" placement="top">
      <div class="frame-text" @click="toOpenTable">
        <img :src="icon" alt="">
      </div>
    </el-tooltip>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :show-close="false"
      :append-to-body="true"
      :width="tableWidth"
      z-index="1000"
      class="frame-content-dialog common-dailog-style">
      <div :style="{height: tableHeight + 'px'}" class="container">
        <div class="title-bar">
          <div :title="linkSrc" class="text">数据由飞博数据平台提供</div>
          <a :href="moreUrl" target="_blank" class="link">
            查看更多 <i class="el-icon-arrow-right"/>
          </a>
          <div v-if="dataUpdateTime" class="time-container">
            <img :src="dataUpdateTimeIcon" alt="">
            当前账号的数据更新时间
            <span class="time">{{ dataUpdateTime | format('YYYY.MM.DD HH:mm') }}</span>
          </div>
          <div style="flex:1;"/>
          <div class="close" @click="handleClose">关闭 <i class="el-icon-close"/> </div>
        </div>
        <iframe v-if="init" :style="{height: tableHeight - 40 + 'px'}" :src="linkSrc" class="frame" title=""/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import defaultIcon from '@/assets/lookData.png';
import dataUpdateTimeIcon from '@/assets/dataUpdateTime.png';
import { getDataUpdateTime } from '@/api/login';
import { format } from '@/filters/date';
export default {
  name: 'FrameContent',
  filters: { format },
  props: {
    btnText: {
      type: String,
      default: '查看'
    },
    dataAccount: {
      type: String,
      default: ''
    },
    platform: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: defaultIcon
    },
    url: {
      type: String,
      default: ''
    },
    accountId: {
      type: Number,
      default: 0
    },
    accountName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataUpdateTimeIcon,
      dialogVisible: false,
      tableHeight: '',
      tableWidth: '960px',
      dataUpdateTime: '',
      init: false
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    moreUrl() {
      if (!this.url) return '';
      const arr = this.url.split('#');
      return arr[0];
    },
    thirdToken() {
      return this.userInfo.thirdToken || '';
    },
    linkSrc() {
      let params = '';
      if (this.thirdToken) params += `token=${this.thirdToken}`; // ${this.dataAccount ? '&' : ''}
      // if (this.dataAccount) params += `accountId=${this.dataAccount}`;
      if (params) {
        params += '&origin=gc';
      } else {
        params += 'origin=gc';
      }
      var timestamp = (new Date()).valueOf();
      params += `&timestamp=${timestamp}`;
      if (this.url.indexOf('?') >= 0) {
        return `${this.url}&${params}`;
      } else {
        return `${this.url}?${params}`;
      }
    }
  },
  methods: {
    async toOpenTable() {
      const res = await getDataUpdateTime({
        dataAccount: this.dataAccount,
        platform: this.platform,
        accountId: this.accountId,
        accountName: this.accountName
      });
      if (res.message) {
        this.$message({
          message: res.message,
          type: 'warning',
          duration: 5000
        });
      }
      this.dataUpdateTime = res.data;
      const clientHeight = window.innerHeight;
      const clientWidth = window.innerWidth;
      const tableHeight = Math.floor((clientHeight * 8.3) / 10);
      const tableWidth = Math.floor((clientWidth * 9) / 10);
      this.tableHeight = tableHeight % 2 === 0 ? tableHeight : tableHeight + 1;
      this.tableWidth = tableWidth % 2 === 0 ? tableWidth : tableWidth + 1;
      this.tableWidth += 'px';
      this.init = true;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      setTimeout(() => {
        this.init = false;
      }, 200);
    }
  }
};
</script>

<style lang="scss" scoped>
.frame-text {
  display: flex;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 13px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #406EFF;
  line-height: 20px;
  img {
    width: 13px;
    height: 13px;
    margin-right: 3px;
  }
}
.title-bar {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  background-color: #406EFF;
  .text {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 18px;
  }
  .link {
    cursor: pointer;
    margin-left: 10px;
    width: 88px;
    height: 28px;
    color: #406EFF;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 4px;
    font-weight: bold;
  }
  .time-container {
    height: 28px;
    margin-left: 16px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    background: rgba(250, 250, 252, .15);
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 14px;
    img {
      width: 16px;
      margin-right: 4px;
    }
    .time {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 16px;
      margin-left: 4px;
    }
  }
  .close {
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    i {
      font-size: 16px;
    }
  }
}
.frame {
  width:100%;
  height: 100%;
  border: none;
  outline: none;
  // max-height: 610px;
  perspective:1;
  -webkit-perspective: 1
}
.container {
  border: none;
  box-sizing: border-box;
  border-radius: 8px !important;
  overflow: hidden;
}
.frame-content-dialog {
 &::v-deep {
  .el-dialog {
  border-radius: 8px !important;
  }
  .el-dialog__headerbtn {
    right: 10px;
    top: 10px;
  }
  .el-dialog__body {
    padding: 0 !important;
  }
 }
}
</style>
<style lang="scss">

</style>
